<template>
  <div class="vc-sketch">
    <div class="vc-sketch-saturation-wrap">
      <saturation v-model="colors" @change="childChange"></saturation>
    </div>
    <div class="vc-sketch-controls">
      <div class="vc-sketch-sliders">
        <div class="vc-sketch-hue-wrap">
          <hue v-model="colors" @change="childChange"></hue>
        </div>
        <div class="vc-sketch-alpha-wrap">
          <alpha v-model="colors" @change="childChange"></alpha>
        </div>
      </div>
      <div class="vc-sketch-color-wrap">
        <div class="vc-sketch-active-color" :style="{background: activeColor}"></div>
        <checkboard></checkboard>
      </div>
    </div>
    <div class="vc-sketch-field">
      <!-- rgba -->
      <div class="vc-sketch-field--double">
        <ed-in label="hex" :value="hex" @change="inputChange"></ed-in>
      </div>
      <div class="vc-sketch-field--single">
        <ed-in label="r" :value="colors.rgba.r" @change="inputChange"></ed-in>
      </div>
      <div class="vc-sketch-field--single">
        <ed-in label="g" :value="colors.rgba.g" @change="inputChange"></ed-in>
      </div>
      <div class="vc-sketch-field--single">
        <ed-in label="b" :value="colors.rgba.b" @change="inputChange"></ed-in>
      </div>
      <div class="vc-sketch-field--single">
        <ed-in label="a" :value="colors.a" :arrow-offset="0.01" :max="1" @change="inputChange"></ed-in>
      </div>
    </div>
    <div class="vc-sketch-presets">
      <div class="vc-sketch-presets-color"
           v-for="c in presetColors"
           :key="c"
           :style="{background: c}"
           @click="handlePreset(c)">
      </div>
    </div>
  </div>
</template>

<script>
    import colorMixin from '../mixin/color'
    import editableInput from './common/EditableInput.vue'
    import saturation from './common/Saturation.vue'
    import hue from './common/Hue.vue'
    import alpha from './common/Alpha.vue'
    import checkboard from './common/Checkboard.vue'

    const presetColors = [
        '#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321',
        '#417505', '#BD10E0', '#9013FE', '#4A90E2', '#50E3C2',
        '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF'
    ]

    export default {
        name: 'Sketch',
        mixins: [colorMixin],
        components: {
            saturation,
            hue,
            alpha,
            'ed-in': editableInput,
            checkboard
        },
        props: {
            presetColors: {
                type: Array,
                default () {
                    return presetColors
                }
            }
        },
        computed: {
            hex () {
                return this.colors.hex.replace('#', '')
            },
            activeColor () {
                var rgba = this.colors.rgba
                return 'rgba(' + [rgba.r, rgba.g, rgba.b, rgba.a].join(',') + ')'
            }
        },
        methods: {
            handlePreset (c) {
                this.colorChange({
                    hex: c,
                    source: 'hex'
                })
            },
            childChange (data) {
                this.colorChange(data)
            },
            inputChange (data) {
                if (!data) {
                    return
                }
                if (data.hex) {
                    this.isValidHex(data.hex) && this.colorChange({
                        hex: data.hex,
                        source: 'hex'
                    })
                } else if (data.r || data.g || data.b || data.a) {
                    this.colorChange({
                        r: data.r || this.colors.rgba.r,
                        g: data.g || this.colors.rgba.g,
                        b: data.b || this.colors.rgba.b,
                        a: data.a || this.colors.rgba.a,
                        source: 'rgba'
                    })
                }
            }
        }
    }
</script>

<style>
  .vc-sketch {
    position: relative;
    width: 200px;
    box-sizing: initial;
    background: #fff;
  }
  .vc-sketch-saturation-wrap {
    width: 100%;
    padding-bottom: 75%;
    position: relative;
    overflow: hidden;
  }
  .vc-sketch-controls {
    display: flex;
  }
  .vc-sketch-sliders {
    padding: 4px 0;
    flex: 1;
  }
  .vc-sketch-sliders .vc-hue,
  .vc-sketch-sliders .vc-alpha-gradient {
    border-radius: 2px;
  }
  .vc-sketch-hue-wrap {
    position: relative;
    height: 10px;
  }
  .vc-sketch-alpha-wrap {
    position: relative;
    height: 10px;
    margin-top: 4px;
    overflow: hidden;
  }
  .vc-sketch-color-wrap {
    width: 24px;
    height: 24px;
    position: relative;
    margin-top: 4px;
    margin-left: 4px;
    border-radius: 3px;
  }
  .vc-sketch-active-color {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 2px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);
    z-index: 2;
  }
  .vc-sketch-color-wrap .vc-checkerboard {
    background-size: auto;
  }

  .vc-sketch-field {
    display: flex;
    padding-top: 4px;
  }
  .vc-sketch-field .vc-input__input {
    width: 80%;
    padding: 4px 10% 3px;
    border: none;
    box-shadow: inset 0 0 0 1px #ccc;
    font-size: 11px;
  }
  .vc-sketch-field .vc-input__label {
    display: block;
    text-align: center;
    font-size: 11px;
    color: #222;
    padding-top: 3px;
    padding-bottom: 4px;
    text-transform: capitalize;
  }
  .vc-sketch-field--single {
    flex: 1;
    padding-left: 6px;
  }
  .vc-sketch-field--double {
    flex: 2;
  }
  .vc-sketch-presets {
    margin-right: -10px;
    margin-left: -10px;
    padding-left: 10px;
    padding-top: 10px;
    border-top: 1px solid #eee;
  }
  .vc-sketch-presets-color {
    border-radius: 3px;
    overflow: hidden;
    position: relative;
    display: inline-block;
    margin: 0 10px 10px 0;
    vertical-align: top;
    cursor: pointer;
    width: 16px;
    height: 16px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
  }
</style>
